<template>
    <!-- 直方图 -->
    <canvas 
        canvas-id="canvasColumn" 
        id="canvasColumn" 
        class="charts" 
        @touchstart="touchColumn"></canvas>
</template>

<script>

    import uCharts from '@/pages/common/u-charts/u-charts.js';
    var _self;
    var canvaColumn = null;

    export default {
        props: {
            width: {
                type: Number
            },
            histogram_data: {
                type: Object
            }
        },
        watch: {
            width(val) {
                this.cWidth = val;
                this.getServerData()
            }
        },
        data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
			}
        },
        mounted() {
            _self = this;
            this.cWidth = this.width;
            this.cHeight = uni.upx2px(500);
            if(this.width != 0){
                this.getServerData();
            }
        },
        methods: {
            getServerData() {
                _self.showColumn("canvasColumn",this.histogram_data);
            },
            showColumn(canvasId,chartData){
				canvaColumn = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					padding:[15,0,0,15],
					legend:{
						show:false,
					},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
                        disableGrid:true,
                        rotateLabel: true,
					},
					yAxis: {
                        data:[{
                            position:'left',
                            axisLine:false,
                            format:(val)=>{return val.toFixed(0)},
                        }]
					},
					dataLabel: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'group',
							width: 18
						}
					  }
				});
				
			},
			touchColumn(e){
				canvaColumn.showToolTip(e, {
					format: function (item, category) {
						if(typeof item.data === 'object'){
							return category + ' ' + item.name + ':' + item.data.value 
						}else{
							return category + ' ' + item.name + ':' + item.data 
						}
					}
				});
        		canvaColumn.touchLegend(e,{animation:true});
			},
        }
    }
</script>

<style lang="scss" scoped>
.charts {
    width: 100%;
    height: 550upx;
}
</style>